<template>
  <div>
    <div style="margin-bottom: 20px;">
         <!-- 查找 -->
     <el-space wrap>
       <!-- 状态选择 -->
         <el-select v-model="status"  placeholder="请选择用户状态">
    <el-option
      v-for="item in optionStatus"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
       <!-- 用户等级选择 -->
         <el-select v-model="level"  placeholder="请选择用户会员等级">
    <el-option
      v-for="item in optionLevel"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
       <!-- 用户性别选择 -->
         <el-select v-model="gender" placeholder="请选择用户性别">
    <el-option
      v-for="item in optionGender"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <!-- 搜索 -->
      <el-input
        class="logInput"
        placeholder="请输入用户ID"
        v-model="id"
      />
    <!-- 昵称 -->
      <el-input
        class="logInput"
        placeholder="请输入昵称"
        v-model="nickname"
      />
      <el-button
        type="primary"
        @click="onSearch"
      ><span class="iconfont icon-sousuo"></span>查找</el-button>
  </el-space>
    </div>
    <!-- 表格 -->
    <el-table ref="tableRef" border  row-key="date" :data="tableData"   style="width: 100%">
    <el-table-column
      prop="id"
      label="用户ID"
      align="center"
      sortable
      width="180"
      column-key="date"
    />
    <el-table-column prop="nickname" label="昵称"  align="center" width="180" />
    <el-table-column prop="phone" label="手机号"  align="center" width="180" />
    <el-table-column prop="gender" label="性别"  align="center"  width="180">
    <template #default="scope" >
  <el-tag >
             {{scope.row.gender==1?'女':'男'}}
           </el-tag>
          </template></el-table-column>
    <el-table-column prop="level" label="会员等级"  align="center"  width="180" >
    <template #default="scope" >
  <el-tag>
            {{scope.row.level==0?'普通会员':'VIP会员'}}
           </el-tag>
          </template></el-table-column>
    <el-table-column prop="birthday" label="生日"  align="center"  width="180" >

      <template #default="scope" >
              {{
                scope.row.birthday?new Date(scope.row.birthday)
                .toLocaleDateString()
                .replace(/\//, "年")
                .replace(/\//, "月") + "日":""
              }}
          </template>

     </el-table-column>
    <el-table-column prop="status" label="状态"  align="center"  width="180" >
    <template #default="scope" >
  <el-tag >
            {{scope.row.status==1?'激活':'冻结'}}
           </el-tag>
          </template></el-table-column>
    <el-table-column prop="gmtLastLogin" label="上次登录时间"  align="center"  width="180" >
     <template #default="scope" >
              {{
                scope.row.gmtLastLogin? new Date(scope.row.gmtLastLogin)
              .toLocaleDateString()
              .substr(5, 5)
              .replace(/\//, "月") +
            "日" +
            new Date(scope.row.gmtLastLogin)
              .toTimeString()
              .substr(0, 8)
              .replace(/:/, "时")
              .replace(/:/, "分") +
            "秒":""
              }}
          </template>

     </el-table-column>
    <el-table-column prop="lastLoginIp" label="上次登录IP"  align="center" />

    <el-table-column
        prop=""
        label="操作"
          align="center"
      >
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleActive(scope.$index)"
          >{{scope.row.status==0?'激活':'冻结'}}</el-button>
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
  </el-table>
   <!-- 弹框 -->
      <el-dialog
        v-model="dialogFormVisible"
        title="编辑"
      >
        <el-form
            ref="ruleFormRef"
          :model="formUser"
          label-position="right"
          label-width="auto"
          :rules="rules"
        >
          <el-form-item
            prop="id"
            label="隐藏的用户id:"
          >
            <el-input
              style="width:180px"
              v-model="formUser.id"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="用户昵称:"
           prop="nickname"
            required
          >
            <el-input
              style="width:180px"
              v-model="formUser.nickname"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="用户手机号:"
             prop="phone"
            required
          >
            <el-input
              style="width:180px"
              v-model="formUser.phone"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="用户密码:"
           prop="password"
            required

          >
            <el-input
              style="width:180px"
              v-model="formUser.password"
            />
          </el-form-item>
          <el-form-item
            label="用户性别"
            prop="gender"
            required
          >
            <el-select
              v-model="formUser.gender"
              placeholder="请选择用户性别"
            >
              <el-option
                v-for="item in optionGender"
                :label="item.label"
                :value="item.value"
                :key="item.value"
                v-show="item.label!='全部'"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="用户等级"
            prop="level"
            required
          >
            <el-select
              v-model="formUser.level"
              placeholder="请选择用户会员等级"
            >
              <el-option
                v-for="item in optionLevel"
                :label="item.label"
                :value="item.value"
                :key="item.value"
                v-show="item.label!='全部'"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="用户状态"
            prop="status"
            required
          >
            <el-select
              v-model="formUser.status"
              placeholder="请选择用户状态"
            >
              <el-option
                v-for="item in optionStatus"
                :label="item.label"
                :value="item.value"
                :key="item.value"
                v-show="item.label!='全部'"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              @click="Cancel"
            >取消</el-button>
            <el-button
            type="primary" @click="resetFlx(ruleFormRef)">修改</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- //分页 -->
    <daily-demo
      v-bind="demo"
      @pages="pages"
      @limits="limits"
    ></daily-demo>
  </div>
</template>

<script>
import http from "@/util/http";
import DailyDemo from "@/components/DailyOperation/Demo.vue";
export default {
  components: {
    DailyDemo,
  },
  data() {
    var text1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
      callback();
    };
    var text2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      }
      callback();
    };
    var text3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    return {
      // 弹框隐藏
      dialogFormVisible: false,
      // 弹框信息
      formUser: {
        id: "",
        nickname: "",
        phone: "",
        password: "",
        status: "",
        level: "",
        gender: "",
      },
      // 规则
      rules: {
        nickname: [
          {
            validator: text1,
            trigger: "blur",
            required: true,
          },
          {
            pattern: /^[\u4e00-\u9fa5]{2,20}$/,
            message: "姓名格式不对",
            trigger: "blur",
          },
        ],
        phone: [
          {
            validator: text2,
            required: true,
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
        password: [
          {
            validator: text3,
            trigger: "blur",
            required: true,
          },
          {
            pattern: /[A-Za-z0-9@#]{6,16}/,
            message: "请输入6-16位密码",
            trigger: "blur",
          },
        ],
      },
      // 要查找的信息
      searchDdata: {},
      id: "", //查找用户ID
      nickname: "", //查找用户昵称
      status: null, //查找用户状态
      level: null, //查找用户等级
      gender: null, //查找用户性别
      // 用户列表信息
      tableData: [],
      // 分页数据
      demo: {
        page: 1,
        limit: 10,
        total: 10,//分页--总条数
      },
      // 状态选择
      optionStatus: [
        { label: "冻结", value: 0 },
        { label: "激活", value: 1 },
        { label: "全部", value: "" },
      ],
      // 用户等级选择
      optionLevel: [
        { label: "普通会员", value: 0 },
        { label: "VIP会员", value: 1 },
        { label: "全部", value: "" },
      ],
      // 用户性别选择
      optionGender: [
        { label: "女", value: 1 },
        { label: "男", value: 2 },
        { label: "全部", value: "" },
      ],
    };
  },
  created() {
    this.memberMange(); //创建后已经加载了 会员列表请求
  },
  methods: {
    // 激活
    handleActive(index) {
      if (this.tableData[index].status == 0) {
        this.tableData[index].status = 1;
        ElMessage.success("激活成功");
        return;
      }
      if (this.tableData[index].status == 1) {
        this.tableData[index].status = 0;
        ElMessage.success("冻结成功");

        return;
      }
    },
    // 编辑
    handleEdit(row) {

      Object.assign(this.formUser, row); //把row赋值给 this.formUser
      this.formUser.password = "";
      this.dialogFormVisible = true;
    },
    // 修改
    resetFlx() {
      if (this.formUser.password == "") {
        ElMessage.error("密码不能为空!");
        return;
      }
      let flxData = {
        _gp: "admin.user",
        _mt: "edit",
        user: JSON.stringify(this.formUser),
      };
      http.post(flxData).then((res) => {
        if (200 == res.data.errno) {
          ElMessage.success("修改成功");
        }
        this.memberMange();
      });
      this.dialogFormVisible = false;
    },
    // 取消
    Cancel() {
      ElMessage.success("取消修改");
      this.dialogFormVisible = false;
    },
    // 查找
    onSearch() {
      this.memberMange();
    },
    // 会员列表请求
    memberMange() {
      let userData = {
        _gp: "admin.user",
        _mt: "list",
        pageNo: this.demo.page,
        limit: this.demo.limit,
        id: this.id,
        nickname: this.nickname,
        status: this.status,
        level: this.level,
        gender: this.gender,
      };
      http.post(userData).then((res) => {
        if (200 == res.data.errno) {
        }
        this.tableData = res.data.data.items;
        this.demo.total = res.data.data.total;
      });
    },
    //分页---当前页数
    pages(e) {
      console.log(e, 456);
      this.demo.page = e;
      this.memberMange();
    },
    // 分页---每页显示条目个数
    limits(e) {
      this.demo.limit = e;
      this.memberMange();
    },
  },
};
</script>
